<template>
  <div class="order-detail">
    <span style="display:inline-block;width: 20px;margin-top:20px"> </span>
    <el-button type="primary" @click="changeBaseInfo">编辑基本信息</el-button>
    <div class="base-info">
      <div class="info-item">
        <div class="item-title">订单号</div>
        <div class="item-content">{{ form.order_num }}</div>
      </div>
      <div class="info-item">
        <div class="item-title">订单类型</div>
        <div class="item-content">{{ form.order_type }}</div>
      </div>
      <div class="info-item">
        <div class="item-title">用户名</div>
        <div class="item-content">{{ form.customer }}</div>
      </div>
      <div class="info-item">
        <div class="item-title">尺码</div>
        <div class="item-content">{{ form.order_size }}</div>
      </div>
      <div class="info-item">
        <div class="item-title">图案</div>
        <div class="item-content">{{ form.want_pic }}</div>
      </div>
      <div class="info-item">
        <div class="item-title">订单来源</div>
        <div class="item-content">{{ form.creat_user_name }}</div>
      </div>
      <div class="info-item">
        <div class="item-title">创建时间</div>
        <div class="item-content">{{ formatTime(form.create_time) }}</div>
      </div>
      <div class="info-item">
        <div class="item-title">订单状态</div>
        <div class="item-content"><el-tag>{{ formatStatus(form.order_status) }}</el-tag></div>
      </div>
      <div class="info-item">
        <div class="item-title">更新时间</div>
        <div class="item-content">{{ formatTime(form.update_time) }}</div>
      </div>
      <div style="width: 100%;">
        <div class="info-item">
          <div class="item-title">订单备注</div>
          <div class="item-content">{{ form.remark }}</div>
        </div>
      </div>
      <div style="width: 100%;" v-if="form.advice">
        <div class="info-item">
          <div class="item-title">修改建议</div>
          <div class="item-content">{{ form.advice }}</div>
        </div>
      </div>
    </div>
    <div class="pic-content">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>原图素材</span>
        </div>
        <el-upload :class="`${picList.length >= 5 || pageName === 'DesignEdit' || uploading ? 'disabled' : ''}`" :on-success="(res, file, fileList) => upOk(res, file, fileList, 'picList')" :file-list="picList" :before-upload="beforeUpload" :headers='headers' action="/api/order/uploadFile" list-type="picture-card">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="showPic(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span v-if="pageName !== 'DesignEdit'" class="el-upload-list__item-delete" @click="removePic(file, 1)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>设计稿</span>
        </div>
        <el-upload :class="`${designList.length >= 3 || pageName === 'OrderEdit' || (form.choose_index !== null && designList.length >= 1) || uploading ? 'disabled' : ''}`" :on-success="(res, file, fileList) => upOk(res, file, fileList, 'designList')" :file-list="designList" :before-upload="beforeUpload" :headers='headers' action="/api/order/uploadFile" list-type="picture-card">
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
              <span class="el-upload-list__item-preview" @click="showPic(file)">
                <i class="el-icon-zoom-in"></i>
              </span>
              <span class="el-upload-list__item-delete" @click="removePic(file, 2)">
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
      </el-card>
      <transition name="el-fade-in">
        <fullscreen-image v-if="dialogVisible" :img-src="dialogImageUrl" @close="dialogVisible = false"></fullscreen-image>
      </transition>
    </div>
    <span style="display:inline-block;width: 20px"> </span>
    <el-button type="primary" @click="save" :disabled='uploading'>保存</el-button>
    <el-button type="primary" @click="back">返回</el-button>
    <BaseInfo :show.sync='baseDialog' :row="form" @refresh='getData' />
  </div>
</template>

<script>
import BaseInfo from './baseInfo.vue'
import FullscreenImage from '../../../components/FullscreenImage.vue';
import { getOrderById, uploadFile, savePics } from '@/api/order'
import { getToken } from '@/utils/auth'
export default {

  components: {
    FullscreenImage, BaseInfo
  },
  data() {
    return {
      pageName: '',
      id: '',
      picList: [],
      designList: [],
      baseDialog: false,
      form: {
        order_num: '',
        creat_user_name: '',
        create_time: '',
        order_status: '',
        update_time: '',
        remark: '',
        advice: '',
        choose_index: '',
        pic_list: '',
        design_list: '',
      },
      allDesignList: [], // 本地缓存所有设计稿，提交的时候拼回去
      dialogImageUrl: '',
      dialogVisible: false,
      uploading: false,
      headers: {
        Authorization: `Bearer ${getToken()}`,
      },
    }
  },
  computed: {
    designer() {
      return this.$store.getters.roles.includes('designer')
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id - 0
      this.getData()
    }
    this.pageName = this.$route.name
  },
  methods: {
    async getData() {
      const res = await getOrderById({ id: this.id })
      if (res.code === 0) {
        this.form = res.data
        if (res.data.pic_list?.length) {
          this.picList = res.data.pic_list
        }
        if (res.data.design_list?.length) {
          if (res.data.choose_index !== null) {
            this.designList = [res.data.design_list[res.data.choose_index]]
            this.allDesignList = res.data.design_list
          } else {
            this.designList = res.data.design_list
          }
        }
      }
    },
    async save() {
      const params = {
        id: this.id,
        picList: this.picList.map(item => { return { url: item.url, name: item.name } }),
        designList: this.designList.map(item => { return { url: item.url, name: item.name } })
      }
      if (this.form.choose_index !== null) {
        if (this.designList.length === 0) {
          return this.$message({ type: 'error', message: '请上传设计稿' })
        }
        this.allDesignList[this.form.choose_index] = { url: this.designList[0].url, name: this.designList[0].name }
        params.designList = this.allDesignList
      }
      const res = await savePics(params)
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      }
    },
    changeBaseInfo() {
      this.baseDialog = true
    },

    beforeUpload(file) {
      const isPic = file.type === 'image/jpeg' || file.type === 'image/png'
      const isSmall = file.size < 1024 * 1024 * 5
      if (!isPic) { this.$message({ type: 'error', message: '仅支持jpg、png格式图片' }) }
      if (!isSmall) { this.$message({ type: 'error', message: '图片大小不能超过5M' }) }
      if (isPic && isSmall) {
        this.uploading = true
      } else {
        return false
      }
    },
    upOk(res, file, fileList, type) {
      const date = res.data.destination.slice(-10)
      file.url = `/public/images/${date}/${res.data.filename}`
      this[type] = fileList
      this.uploading = false
    },
    removePic(file, type) {
      this.$confirm('确认删除该文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (type === 1) {
          console.log(file.url);
          this.picList = this.picList.filter(item => item.url !== file.url)
        } else if (type === 2) {
          this.designList = this.designList.filter(item => item.url !== file.url)
        }
      }).catch(() => {})
    },
    showPic(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    back() {
      this.$router.back()
    }
  }
}
</script>
<style lang="scss">
.order-detail {
  padding: 20px 0;
  width: 1200px;
  .base-info {
    margin: 20px 20px 0 20px;
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #ebeef5;
    border-left: 1px solid #ebeef5;
    .info-item {
      display: flex;
      flex: 1 0 30%;
      border-bottom: 1px solid #ebeef5;
      border-right: 1px solid #ebeef5;
      font-size: 14px;
      line-height: 14px;
      .item-title{
        border-right: 1px solid #ebeef5;
        width: 120px;
        text-align: center;
        padding: 14px;
        color: #909399;
        background-color: #fafafa;
      }
      .item-content{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 10px;
        color: #606266;
      }
    }
  }
  .pic-content{
    padding: 20px 0 20px 20px;
    display: flex;
    .box-card{
      flex: 0 0 568px;
      height: 408px;
      margin-right: 20px;
      .disabled .el-upload--picture-card{
        display: none;
      }
    }
  }
}
</style>
